<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/parkTemplate.xhtml"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:p="http://primefaces.org/ui">

    <style type="text/css">

    </style>
    <ui:param name="tab" value="clientPanel"/>
    <ui:define name="title">
        #{bundle['client.panelTitle']}
    </ui:define>

    <ui:define name="tab-content">

        <p:tabView id="tabView" orientation="left" styleClass="tableText" widgetVar="tabPanel">

            <p:tab id="tab0" title="#{bundle['client.tabName']}">
                <h:panelGrid columns="2" style="width: 100%" columnClasses="userData, passwordChanged">
                    <h:form id="userProfile">
                        <p:growl id="grww" showDetail="true"   life="1500"/>  
                        <p:panel id="usData" header="#{bundle['client.dataTitle']}">  

                            <h:panelGrid columns="2" cellpadding="10">   

                                <h:outputLabel for="last" value="#{bundle['client.lastname']}" />  
                                <h:outputText id="last" value="#{clientBean.lastName}" />  

                                <h:outputLabel for="name" value="#{bundle['client.name']}" />  
                                <h:outputText id="name" value="#{clientBean.name}"/>  

                                <h:outputText value="#{bundle['client.city']}" />  
                                <p:inplace id="city">  
                                    <p:inputText value="#{clientBean.city}" >  
                                        <f:validateLength minimum="2" maximum="30" />  
                                    </p:inputText>
                                </p:inplace>  

                                <h:outputText value="#{bundle['client.postcode']}" />  
                                <p:inplace id="zip">  
                                    <p:inputText value="#{clientBean.zipCode}" >
                                        <f:validateLength minimum="2" maximum="15" />  
                                    </p:inputText>
                                </p:inplace>  

                                <h:outputText value="#{bundle['client.street']}" />  
                                <p:inplace id="street">  
                                    <p:inputText value="#{clientBean.street}" >  
                                        <f:validateLength minimum="2" maximum="30" />  
                                    </p:inputText>
                                </p:inplace>  

                                <h:outputText value="#{bundle['client.nrhouse']}" />  
                                <p:inplace id="hNum">  
                                    <p:inputText value="#{clientBean.houseNumber}" />  
                                </p:inplace>  

                                <h:outputText value="#{bundle['client.localNumber']}" />  
                                <p:inplace id="lNum">  
                                    <p:inputText value="#{clientBean.localNumber}" >
                                        <f:validateLength maximum="11" />  
                                    </p:inputText>
                                </p:inplace>  

                                <h:outputLabel for="nip" value="#{bundle['client.nip']}" />  
                                <h:outputText id="nip" value="#{clientBean.nipNumber}"/>  

                                <h:outputText value="#{bundle['client.phone']}" />  
                                <p:inplace id="phone">  
                                    <p:inputText value="#{clientBean.phone}" >
                                        <f:validateLength  maximum="12" />  
                                    </p:inputText>
                                </p:inplace>  

                                <h:outputText value="#{bundle['client.email']}" />  
                                <p:inplace id="mail">  
                                    <p:inputText value="#{clientBean.email}" >
                                        <f:validateLength  maximum="50" />  
                                    </p:inputText>
                                </p:inplace> 
                                <p:commandButton value="#{bundle['website.button.save']}" actionListener="#{clientBean.updateClient}" update="usData,grww" >
                                </p:commandButton>
                                <p:tooltip for="last" value="#{bundle['client.form_this_field_is_disabled_for_edit']}" showEffect="fade" hideEffect="fade" />  
                                <p:tooltip for="nip" value="#{bundle['client.form_this_field_is_disabled_for_edit']}" showEffect="fade" hideEffect="fade" />  
                                <p:tooltip for="name" value="#{bundle['client.form_this_field_is_disabled_for_edit']}" showEffect="fade" hideEffect="fade" />  
                            </h:panelGrid>
                        </p:panel>

                    </h:form>


                    <h:form id="passMatch">
                        <p:panel id="passCh" header="#{bundle['password.changePassword']}">  
                            <p:growl id="grww" showDetail="true"   life="1500"/>   
                            <h:panelGrid columns="2" id="matchGridPass" styleClass="tableText">   

                                <h:outputLabel for="pwd1" value="#{bundle['client.newPassword']}" />  
                                <p:password id="pwd1" value="#{clientBean.password}" match="pwd2" label="#{bundle['client.password']}" required="true"/>  

                                <h:outputLabel for="pwd2" value="#{bundle['client.repeatPassword']}" />  
                                <p:password id="pwd2" value="#{clientBean.password}" label="#{bundle['client.repeatPassword']}" required="true"/>  
                            </h:panelGrid>  

                            <p:commandButton id="saveButton" update="passCh,grww" value="Zapisz" actionListener="#{clientBean.updatePassword}" icon="ui-icon-check"   />  
                        </p:panel>  

                    </h:form>
                </h:panelGrid>
                <h:form id="acc">


                    <p:growl id="messagesg" showDetail="true"/>
                    <br />
                    <p:dataTable var="acc" value="#{accountingDataBean.allByClient}" id="acList" editable="true" style="font-size: 12px;" emptyMessage="#{bundle['website.noRecordsFound']}">

                        <f:facet name="header">
                            #{bundle['accounting.TableHeader']}
                        </f:facet>




                        <p:ajax event="rowEdit" listener="#{accountingDataBean.onEdit}" update=":tabView:acc:messagesg" />  
                        <p:ajax event="rowEditCancel" listener="#{accountingDataBean.onCancel}" update=":tabView:acc:messagesg" />  

                        <p:column headerText="  #{bundle['accounting.name']}" style="width:20%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.name}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.name}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="  #{bundle['accounting.city']}" style="width:10%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.city}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.city}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="  #{bundle['accounting.zip']}" style="width:10%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.zipNumber}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.zipNumber}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>



                        <p:column headerText="#{bundle['accounting.street']}" style="width:10%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.street}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.street}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="#{bundle['accounting.house']}" style="width:5%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.houseNumber}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.houseNumber}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="  #{bundle['accounting.local']}" style="width:5%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.localNumber}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.localNumber}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="  #{bundle['accounting.nip']}" style="width:15">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.nipNumber}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.nipNumber}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="  #{bundle['accounting.phone']}" style="width:12%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{acc.phone}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{acc.phone}" style="width:100%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="  #{bundle['accounting.type']}" style="width:10%">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{accountingDataBean.getLabelFromPayerValue(acc)}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:selectOneMenu>  
                                        <f:selectItems value="#{accountingDataBean.payerOptions}"
                                                       var="payerType" 

                                                       itemValue="#{acc.payerType}"
                                                       itemLabel="  #{bundle['accounting.type']}"
                                                       />
                                    </h:selectOneMenu>  
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column style="width:3%">                           

                            <p:rowEditor  />
                        </p:column>
                    </p:dataTable>


                </h:form>
            </p:tab>



            <p:tab id="tab2" title="#{bundle['passes.Title']}">

                <h:form id="formPass">

                    <p:growl id="grww" showDetail="true"   life="1500"/>  
                    <h:outputText value="Wystawione na: " />
                    <h:selectOneMenu value="#{parkingPassesBean.chosenAcc}" style="width: 100%;">  

                        <f:selectItems value="#{accountingDataBean.accByClientOptions}"  />  
                        <p:ajax event="change" update=":tabView:formPass" />
                    </h:selectOneMenu>  
                    <p:dataGrid var="pass" id="passestable" value="#{parkingPassesBean.passesByClient}" columns="2"
                                rows="9" paginator="true"
                                paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                rowsPerPageTemplate="4,6,8" 
                                paginatorPosition="top" 

                                paginatorAlwaysVisible="false" style="border-width: 0px;"
                                emptyMessage="#{bundle['website.noRecordsFound']}">

                        <p:panel header="#{bundle['passes.id']} #{pass.parkingPassId}"  style="text-align:center; width: 320px;">
                            <h:panelGrid columns="2" style="width:100%; text-align: center">

                                <h:outputLabel  value="#{bundle['passes.make']}" />
                                <h:outputText value="#{pass.carId.make}" />

                                <h:outputLabel  value="#{bundle['passes.model']}" />
                                <h:outputText value="#{pass.carId.model}" />

                                <h:outputLabel  value="#{bundle['passes.numberPlate']}" />
                                <h:outputText value="#{pass.carId.numberPlate}" />

                                <h:outputLabel  value="#{bundle['passes.place']}" />
                                <h:outputText value="#{pass.numberId.number}" />


                                <p:commandLink update=":tabView:formPass:passDetail" oncomplete="PF('passDialog').show()" title="#{bundle['passes.showMore']}" value="#{bundle['passes.showMore']}">
                                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /> 
                                    <f:setPropertyActionListener value="#{pass}" 
                                                                 target="#{parkingPassesBean.selectedPass}" />
                                </p:commandLink>

                                <p:commandLink  oncomplete="PF('dlg').show()" title="#{bundle['passes.editCar']}" value="#{bundle['passes.editCar']}">
                                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /> 
                                    <f:setPropertyActionListener value="#{pass}" 
                                                                 target="#{parkingPassesBean.selectedPass}" />
                                </p:commandLink>

                            </h:panelGrid>
                        </p:panel>

                    </p:dataGrid>

                    <p:dialog header="Zmień pojazd" widgetVar="dlg" resizable="false">  
                        <h:form id="form">  
                            <p:selectOneButton value="#{parkingPassesBean.radioOptions}"  >  
                                <p:ajax event="change"  update="carbut"/>

                                <f:selectItem itemLabel="Wybierz" itemValue="1" />  
                                <f:selectItem itemLabel="Dodaj nowy" itemValue="2" />   
                            </p:selectOneButton>  

                            <p:panel id="carbut">

                                <h:panelGrid  columns="2" cellpadding="2"  > 
                                    <h:outputText value="Wybierz którąś z dostępnych opcjii." rendered="#{empty parkingPassesBean.radioOptions}"/>
                                    <h:outputText id="tarriddf" value="Moje pojazdy: "  rendered="#{parkingPassesBean.radioOptions.equals('1')}" />

                                    <h:selectOneMenu value="#{parkingPassesBean.chosenCar}"  rendered="#{parkingPassesBean.radioOptions.equals('1')}" style="width: 100%;">  

                                        <f:selectItems value="#{parkingPassesBean.carsByClientForChange}"  />  

                                    </h:selectOneMenu>  


                                    <h:outputText value="Rejestracja: " rendered="#{parkingPassesBean.radioOptions.equals('2')}"  />  

                                    <p:inputText value="#{parkingPassesBean.plate}" placeholder="podaj rejestrację" rendered="#{parkingPassesBean.radioOptions.equals('2')}">
                                        <f:validateLength maximum="10" rendered="#{parkingPassesBean.radioOptions.equals('2')} "/>  
                                    </p:inputText>

                                    <h:outputText value="Marka: " rendered="#{parkingPassesBean.radioOptions.equals('2')}" />  

                                    <p:inputText value="#{parkingPassesBean.make}" placeholder="określ markę pojazdu" rendered="#{parkingPassesBean.radioOptions.equals('2')}">
                                        <f:validateLength maximum="20"  rendered="#{parkingPassesBean.radioOptions.equals('2')}" />  
                                    </p:inputText>

                                    <h:outputText value="Model: " rendered="#{parkingPassesBean.radioOptions.equals('2')}"/>  

                                    <p:inputText value="#{parkingPassesBean.model}" placeholder="podaj model pojazdu" rendered="#{parkingPassesBean.radioOptions.equals('2')}">
                                        <f:validateLength maximum="50" rendered="#{parkingPassesBean.radioOptions.equals('2')}" />  
                                    </p:inputText>

                                </h:panelGrid>
                            </p:panel>

                            <p:commandButton id="submitButton" value="Zapisz" update=":tabView:formPass,:tabView:formPass:grww" oncomplete="PF('dlg').hide();" actionListener="#{parkingPassesBean.updateCarinParkingPasses}"/>  

                        </h:form>  
                    </p:dialog>
                    <p:dialog header="#{bundle['passes.showMoreTitle']}" widgetVar="passDialog" modal="true">
                        <p:outputPanel id="passDetail" style="text-align:center;">



                            <h:panelGrid  columns="2" cellpadding="10">
                                <h:outputLabel for="issueDate" value="#{bundle['passes.issueDate']}" />
                                <h:outputText id="issueDate" value="#{parkingPassesBean.dateIssueForUSer}" />

                                <h:outputLabel for="expDate" value="#{bundle['passes.expDate']}" />
                                <h:outputText id="expDate" value="#{parkingPassesBean.expirationDateForUser}" />

                                <h:outputLabel for="tarrif" value="#{bundle['passes.tarrif']}" />
                                <h:outputText id="tarrif" value="#{parkingPassesBean.selectedPass.tarrif.name}" />

                                <h:outputLabel for="rank" value="#{bundle['passes.rank']}" />
                                <h:outputText id="rank" value="#{parkingPassesBean.selectedPass.tarrif.rank}" />

                            </h:panelGrid>
                        </p:outputPanel>
                    </p:dialog>


                </h:form>


            </p:tab>

            <p:tab id="tab3" title="#{bundle['parks.parksTitle']}">

                <h:form>

                    <p:dataTable id="parkTable" var="park" value="#{tarrifsParks.parksByClient}" widgetVar="parkTable" 
                                 filteredValue="#{tarrifsParks.filteredParks}" emptyMessage="#{bundle['website.noRecordsFound']}">
                        <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="#{bundle['parks.parksTitle']}" />
                            </p:outputPanel>
                        </f:facet>

                        <p:column id="idColumn" filterBy="#{park.parkId}" sortBy="#{park.parkId}" 
                                  headerText="#{bundle['parks.id']}" 
                                  filterMatchMode="exact">
                            <h:outputText value="#{park.parkId}" />
                        </p:column>
                        <p:column id="typColumn" filterBy="#{park.type}"  sortBy="#{park.type}" 
                                  headerText="#{bundle['parks.operationType']}"
                                  filterOptions="#{tarrifsParks.operationOptions}"
                                  filterMatchMode="exact">
                            <h:outputText value="#{tarrifsParks.getOperationType(park)}" />
                        </p:column>
                        <p:column id="carMake" filterBy="#{park.parkingPassId.carId.make}"    sortBy="#{park.parkingPassId.carId.make}" 
                                  headerText="#{bundle['parks.carMake']}" 
                                  filterMatchMode="contains">  
                            <h:outputText value="#{park.parkingPassId.carId.make}" />  
                        </p:column>  
                        <p:column id="carModel" filterBy="#{park.parkingPassId.carId.model}"  sortBy="#{park.parkingPassId.carId.model}"  
                                  headerText="#{bundle['parks.carModel']}" 
                                  filterMatchMode="contains">  
                            <h:outputText value="#{park.parkingPassId.carId.model}" />  
                        </p:column>  
                        <p:column id="carPlate" filterBy="#{park.parkingPassId.carId.numberPlate}"   sortBy="#{park.parkingPassId.carId.numberPlate}" 
                                  headerText="#{bundle['parks.carPlate']}"  
                                  filterMatchMode="contains">  
                            <h:outputText value="#{park.parkingPassId.carId.numberPlate}" />  
                        </p:column> 

                        <p:column id="date" filterBy="#{park.parkDate}"  sortBy="#{park.parkDate}"  
                                  headerText="#{bundle['parks.parkDate']}"  
                                  filterMatchMode="contains">  
                            <h:outputText value="#{tarrifsParks.getParkDate(park)}" />  
                        </p:column> 


                    </p:dataTable>

                </h:form>






            </p:tab>

            <p:tab id="tab4" title="#{bundle['payments.tabTitle']}">

                <h:form id="formRec">
                    <p:growl id="grww" showDetail="true"   life="1500"/>  
                    <p:dataTable id="recTable" var="rcv" value="#{paymentBean.receivablesByClient}"
                                 rowStyleClass="#{paymentBean.getPaymentByReceivable(rcv) eq null ? 'unPayed' : 'Payed'}"  emptyMessage="#{bundle['website.noRecordsFound']}">

                        <f:facet name="header">
                            #{bundle['payments.header']}
                        </f:facet>


                        <p:row>

                            <p:column colspan="5" headerText="#{bundle['payments.receivables']}" />
                            <p:column colspan="2" headerText="#{bundle['payments.payment']}" />
                        </p:row>





                        <p:column id="idColumn" filterBy="#{rcv.receivableId}" sortBy="#{rcv.receivableId}" 
                                  headerText="#{bundle['payments.id']}" 
                                  filterMatchMode="exact" style="width: 40px;">
                            <h:outputText value="#{rcv.receivableId}" />
                        </p:column>

                        <p:column id="autColumn" filterBy="#{rcv.amount}" sortBy="#{rcv.amount}" 
                                  headerText="#{bundle['payments.amount']}" 
                                  filterMatchMode="contains">
                            <h:outputText value="#{rcv.amount}" />
                        </p:column>

                        <p:column id="creaColumn" filterBy="#{rcv.creationDate}" sortBy="#{rcv.creationDate}" 
                                  headerText="#{bundle['payments.creationDate']}" 
                                  filterMatchMode="contains">
                            <h:outputText value="#{tarrifsParks.getCreationDate(rcv)}" />
                        </p:column>

                        <p:column id="payDeadColumn" filterBy="#{rcv.payDeadline}" sortBy="#{rcv.payDeadline}"
                                  headerText="#{bundle['payments.payDeadline']}" 
                                  filterMatchMode="contains">
                            <h:outputText value="#{tarrifsParks.getPayDeadline(rcv)}" />
                        </p:column>

                        <p:column id="passColumn" filterBy="#{rcv.parkingPassId.parkingPassId}" sortBy="#{rcv.parkingPassId.parkingPassId}"
                                  headerText="#{bundle['payments.payedPass']}" 
                                  filterMatchMode="contains">
                            <h:outputText value="#{rcv.parkingPassId.parkingPassId}" />
                        </p:column>

                        <p:column headerText="#{bundle['payments.paymentDate']}"> 
                            #{paymentBean.getPaymentByReceivable(rcv) eq null ? bundle['payments.unPayed']: paymentBean.getPaymentDateForUser(rcv)}
                        </p:column>

                        <p:column headerText="#{bundle['payments.paymentType']}">
                            #{paymentBean.getPaymentByReceivable(rcv) eq null ? bundle['payments.unPayed']: paymentBean.getPaymentTypeForUSer(rcv)}
                        </p:column>

                        <p:column>
                            <p:commandButton  oncomplete="PF('dlgP').show()" title="Zapłać" value="Zapłać" update=":tabView:formRec:basicDialog" rendered="#{empty paymentBean.getPaymentByReceivable(rcv)}">

                                <f:setPropertyActionListener value="#{rcv}" 
                                                             target="#{paymentBean.currentReceivable}" />
                            </p:commandButton>
                        </p:column>


                    </p:dataTable>


                    <p:dialog id="basicDialog" header="Wybierz Bank" widgetVar="dlgP" >  

                        <p:dataGrid var="bank" value="#{paymentBean.popularBanks}"   
                                    paginator="false"  

                                    >  

                            <p:panel header="#{bank.name}" style="text-align:center">  
                                <h:outputLink value="#{bank.url}" target="_blank">
                                    <p:graphicImage value="#{bank.imgPath}"/>   
                                </h:outputLink>
                            </p:panel>  

                        </p:dataGrid>  
                        <p:panel header="Dane do przelewu">
                            <h:panelGrid columns="2" cellpadding="10" style="text-align: right;">  

                                <h:outputText value="Numer rachunku odbiorcy: "></h:outputText>
                                <h:outputText value="12 1353 4848 0000 8080 8181 1270"></h:outputText>

                                <h:outputText value="Nazwa Odbiorcy: "></h:outputText>
                                <h:outputText value="Carpark2013"></h:outputText>

                                <h:outputText value="Adres: "></h:outputText>
                                <h:outputText value=" ul. Wybrzeże Wyspiańskiego 34, 56-478 Wrocław"></h:outputText>

                                <h:outputText value="Tytułem: "></h:outputText>
                                <h:outputText value="#{paymentBean.transferTitle}"></h:outputText>

                                <h:outputText value="Kwota: "></h:outputText>
                                <h:outputText value="#{paymentBean.rank}"></h:outputText>

                            </h:panelGrid>
                            <p:commandButton  oncomplete="PF('dlgP').hide()" title="Potwierdzam dokonanie przelewu" value="Potwierdzam dokonanie przelewu" update=":tabView:formRec:recTable,:tabView:formRec:grww" style="width: 100%;"
                                              actionListener="#{paymentBean.addPayment}"
                                              >                                 
                            </p:commandButton>
                        </p:panel>

                    </p:dialog> 

                </h:form>
            </p:tab>



        </p:tabView>


    </ui:define>
</ui:composition>